<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>后台登录</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="/css/login.css"/>
</head>

<body>
<div class="m-login-bg">
    <div class="m-login">
        <h3>用户注册</h3>
        <div class="m-login-warp">
            <form class="layui-form">
                <div class="layui-form-item">
                    <input type="text" name="name" id="userName" required lay-verify="required|userName" placeholder="用户名" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <input type="text" name="mail" id="mail" required lay-verify="required|mail" placeholder="邮箱或手机号" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <input type="password" name="pwd" id="password" required lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <input type="password"  id="password1" required lay-verify="required|password1" placeholder="确认密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <div class="layui-col-xs5"><input type="text" name="validateCode"  required  lay-verify="required" placeholder="验证码" autocomplete="off" class="layui-input"></div>
                    <div class="layui-col-xs5"> <div style="margin-left: 10px;"> <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" name="btnSendCode" id="btnSendCode">获取验证码</button> </div> </div>
                </div>
                <div class="layui-form-item m-login-btn">
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="login">注册</button>
                    </div>
                    <div class="layui-inline">
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery-3.5.0.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    var InterValObj; //timer变量，控制时间
    var count = 3; //间隔函数，1秒执行
    var curCount=120;//当前剩余秒数
    layui.use('form', function() {
        var form = layui.form,
            $ = layui.jquery,
            layer = layui.layer;

        //自定义验证规则
        form.verify({
            userName: function(value) {
                if(value.length < 5) {
                    return '用户名至少得5个字符啊';
                }
            },
            password: [/(.+){6,12}$/, '密码必须6到12位'],
            password1:function(data){
                if($.trim(data) != $.trim($("#password").val())){
                    return '确认密码和密码不一致!';
                }
            }
        });

        form.on('submit(login)', function(data) {
            $.ajax({
                url:'/register',
                data:data.field,
                type:'POST',
                success:function (data) {
                    if(data.code ==0){
                        layer.msg("注册成功",{timer:1000},function () {
                            window.location.href = "/";
                        })
                    }else{
                        layer.msg(data.msg,{timer:1000})
                    }
                },
                error:function (xhr, status, err) {
                    layer.msg("登录失败",{timer:1000});
                }
            });
            return false;
        });

        //获取验证码
        $(document).on('click','[name=btnSendCode]',function () {
            var mailVal=$.trim($("#mail").val());
            if(mailVal==''){
                layer.msg("请输入邮箱或手机号",{timer:1000});
                return false;
            }
            var flag =checkMail(mailVal);
            if(!flag){
                layer.msg("邮箱或手机号错误",{timer:1000});
                return false;
            }
            $.ajax({
                url:"/getValidateCode",
                data:{"mail":$("#mail").val()},
                type:"get",
                dataType:"json",
                success:function(data){
                    if(data.code==0){
                        $('#btnSendCode').text(curCount + "秒后重获");
                        InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
                    }else{
                        layer.msg("获取验证码失败",{timer:1000});
                    }
                },
                error:function(data){
                    layer.msg('获取验证码失败',{timer:1000});
                }
            });
        })
    });

    //timer处理函数
    function SetRemainTime(){
        if(curCount == 0){
            $('#btnSendCode').text("获取验证码");
            window.clearInterval(InterValObj);// 停止计时器
        } else{
            curCount--;
            $('#btnSendCode').text(curCount + "秒后重获");
        }
    }
    function checkMail(value) {
        //判断是否为手机号
        var pattern=/^1\d{10}$/;
        if(pattern.test(value)){
            return true;
        }
        //验证邮箱
        pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if(pattern.test(value)){
            return true;
        }
        return false;
    }

</script>
</body>

</html>